<template>
  <div class="wrapper put2" style="width:100%;max-width:1200px;">
    <!-- 文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行、文本很多行 文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文 -->
    <input :id="'exp' + count" class="exp" type="checkbox" />
    <div class="texttext el-family">
      <label class="btn" :for="'exp' + count"></label>
      {{ text }}
    </div>
  </div>
</template>

<script>
// -----------------------------------
// 纯CSS实现多很文本展开收起
// https://blog.51cto.com/u_15064630/3358607
var count = 1;
export default {
  props: {
    mwidth: {
      type: String,
      default: "610px"
    },
    // 很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行、很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行、文本很多行 文本很多行文本很多很多行文本很多行文本很多行文本很多行文本111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111行文本很多
    text: {
      type: String,
      default:
        "很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行、很多行文本很多行文本很多行文本很多行文本很多行很多行文本很多行文本很多行文本很多行文本很多行文本很多行行文本很多"
    }
  },
  data() {
    return {
      isShow: true,
      count: ++count
    };
  },
  methods: {
    details() {
      this.$emit("details");
    }
  }
};
</script>

<style lang="less" scoped>
.put2.wrapper {
  display: flex;
  //   margin: 50px auto;
  min-width: 300px;
  overflow: hidden;
  // border-radius: 8px;
  //   padding: 15px;
  padding-left: 0;
  //   box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  .texttext {
    word-break: break-all;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    /* display: flex; */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    position: relative;
    vertical-align: top;
  }
  .texttext::before {
    content: "";
    height: calc(100% - 22px);
    float: right;
  }
  .texttext::after {
    content: "";
    width: 999vw;
    height: 999vw;
    position: absolute;

    //   margin-left: -100px;
    background-color: #fff;
  }
  .btn {
    float: right;
    clear: both;
    margin-left: 10px;
    font-size: 16px;
    padding: 0 8px;
    //   background: #3f51b5;
    line-height: 24px;
    border-radius: 4px;
    color: #64b6a8;
    cursor: pointer;
    margin-top: 0px;
    transform: scale(0.9) translateY(-3px);
  }
  .btn::before {
    content: "展开";
  }
  .btn::after {
    content: "\E6DF";
    // font-size: 16px;
    //   line-height: 36px;
  }
  .exp {
    display: none;
  }
  .exp:checked + .texttext {
    -webkit-line-clamp: 999;
  }
  .exp:checked + .texttext::after {
    visibility: hidden;
  }
  .exp:checked + .texttext .btn::before {
    content: "收起";
  }
  .exp:checked + .texttext .btn::after {
    content: "\E6E1";
    // font-size: 16px;
    //   line-height: 36px;
  }
}
[line-clamp="1"] {
  -webkit-line-clamp: 1;
}
[line-clamp="2"] {
  -webkit-line-clamp: 2;
}
[line-clamp="3"] {
  -webkit-line-clamp: 3;
}
[line-clamp="4"] {
  -webkit-line-clamp: 4;
}
[line-clamp="9999"] {
  -webkit-line-clamp: 9999;
}
.el-family {
  font-size: 18px;
  color: #64b6a8;
  font-family: element-icons !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  //   line-height: 36px;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  // \E6DF
  // \E6E1
}
</style>
